<div class="panel panel-default panel-intro">

    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>{$reserve['reserve_number']}</h3>
                    <p>总开放预约数量</p>
                </div>
                <div class="icon">
                    <i class="fa fa-comments"></i>
                </div>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>{$reserve['reserved_number']}</h3>
                    <p>剩余预约数量</p>
                </div>
                <div class="icon">
                    <i class="fa fa-navicon"></i>
                </div>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>{$yi_yuyued}</h3>
                    <p>已预约数量</p>
                </div>
                <div class="icon">
                    <i class="fa fa-bullhorn"></i>
                </div>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- small box -->
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>{$allcounted}</h3>
                    <p>已过期预约数</p>
                </div>
                <div class="icon">
                    <i class="fa fa-warning"></i>
                </div>
            </div>
        </div>
        <!-- ./col -->
    </div>

    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-aqua">
                <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">总预约数量</span>
                    <span class="info-box-number">{$allcount}</span>

                    <div class="progress">
                        <div class="progress-bar" style="width: 20%"></div>
                    </div>
                    <span class="progress-description">
                        所有预约数量
                    </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">在图书馆人数</span>
                    <span class="info-box-number">{$into_count}</span>

                    <div class="progress">
                        <div class="progress-bar" style="width: 20%"></div>
                    </div>
                    <span class="progress-description">
                        所有在图书馆人数
                      </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fa fa-calendar"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">已离开图书馆人数</span>
                    <span class="info-box-number">{$leave_count}</span>

                    <div class="progress">
                        <div class="progress-bar" style="width: 20%"></div>
                    </div>
                    <span class="progress-description">
                        所有离开图书馆人数
                      </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-red">
                <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">预约过期人数</span>
                    <span class="info-box-number">{$allcounted}</span>

                    <div class="progress">
                        <div class="progress-bar" style="width: 20%"></div>
                    </div>
                    <span class="progress-description">
                    所有预约过期人数
                  </span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
    </div>
    {:build_heading()}
    
    <div id="datefilter">
        <form action="" role="form" novalidate="novalidate" class="form-inline nice-validator n-default n-bootstrap">
            <a class="btn btn-primary btn-filter btn-refresh btn-yester" href="javascript:;" type="0"><i class="fa fa-refresh"></i></a>
            <!-- <a class="btn btn-success btn-filter" href="reserve_statistics?type=1">今天</a> -->
            
            <!-- <a class="btn btn-success btn-filter" href="reserve_statistics?type=2">昨天</a> 
            <a class="btn btn-success btn-filter" href="reserve_statistics?type=7">最近7天</a>
            <a class="btn btn-success btn-filter" href="reserve_statistics?type=30">最近30天</a>
            <a class="btn btn-success btn-filter" href="reserve_statistics?type=31">上月</a>
            <a class="btn btn-success btn-filter" href="reserve_statistics?type=32">本月</a>   -->

            <a class="btn btn-success btn-filter btn-yester" href="javascript:;" type="1">今天</a>                    
            <a class="btn btn-success btn-filter btn-yester" href="javascript:;" type="2">昨天</a>

            <a class="btn btn-success btn-filter btn-yester" href="javascript:;" type="7">最近7天</a>
            <a class="btn btn-success btn-filter btn-yester" href="javascript:;" type="30">最近30天</a>
            <a class="btn btn-success btn-filter btn-yester" href="javascript:;" type="31">上月</a>
            <a class="btn btn-success btn-filter btn-yester" href="javascript:;" type="32">本月</a>
            <!-- <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input type="text" class="form-control input-inline datetimerange" placeholder="指定日期" style="width:270px;" id="N700874642957">
            </div> -->
        </form>
    </div>

    <div class="panel-body">
        <!-- Main row -->
        <div class="row" style="margin-bottom:5px;">
            <section class="connectedSortable">
                <!-- solid sales graph -->
                <div class="box box-solid bg-teal-gradient">
                    <div class="box-header">
                        <i class="fa fa-th"></i>
                        <h3 class="box-title">预约走势</h3>
                        <div class="box-tools pull-right">
                        </div>
                    </div>
                    <div class="box-body border-radius-none">
                        <div class="chart" id="smoothline-chart" style="height:350px;width:100%;"></div>
                    </div>
                    <!-- /.box-body-->
                </div>
                <!-- /.box -->

            </section>
            <!-- right col -->
        </div>
        <!-- /.row (main row) -->
    </div>
</div>
<script>
    var Orderdata = {
        column: {:json_encode(array_keys($paylist))},
        paydata: {:json_encode(array_values($paylist))}
    };
   // alert(Orderdata.column+"####"+Orderdata.paydata);
</script>